<template>
  <el-dialog title="产品物模型" width="70%" top="20px" v-model="state.visible" :close-on-press-escape="false"
             :close-on-click-modal="false"
             append-to-body
             destroy-on-close>

    <div v-if="state.visible" v-loadings="state.loading">
      <el-tabs type="border-card" v-model="activeTab">
        <el-tab-pane label="属性列表" :name="0">
          <el-card shadow="hover">
            <template #header>
              <el-row justify="space-between" style="margin-bottom: 0;">
                <el-row :gutter="10">
                  <el-col :span="1.5">
                    <el-button type="primary" plain @click="addDialog=true" icon="Plus">新增
                    </el-button>
                  </el-col>
                </el-row>
              </el-row>
            </template>
            <el-table :data="properList">
              <el-table-column label="属性名称" align="center" key="name" prop="name"/>
              <el-table-column label="标识符" align="center" key="symbol" prop="symbol"/>
              <el-table-column label="数据类型" align="center" key="dataType" prop="dataType"/>
              <el-table-column label="规则" align="center" key="rule" prop="rule"/>
              <el-table-column label="默认值" align="center" key="default" prop="default"/>

            </el-table>
          </el-card>
          <el-dialog title="新增属性" v-model="addDialog">
            <el-form :model="form" ref="productRef" label-width="80px" :rules="rule">
              <el-form-item label="属性名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入属性名称"/>
              </el-form-item>
              <el-form-item label="标识符" prop="symbol">
                <el-input v-model="form.symbol" placeholder="请输入标识符"/>
              </el-form-item>
              <el-form-item label="规则">
                <el-input v-model="form.rule" placeholder="请输入规则"/>
              </el-form-item>
              <el-form-item label="default" prop="defaultValue">
                <el-input v-model="form.defaultValue" placeholder="请输入默认值"/>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </template>
          </el-dialog>
          <!--            <function-config v-if="activeTab === 0" :id="state.id" :model="state.model" />-->
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup>
import {addProduct, updateProduct} from "@/api/equip/product";

const activeTab = ref(0)
const addDialog = ref(false)
const rule = reactive({
  symbol: [{
    required: true,
    message: '请输入属性标识符',
    trigger: 'blur'
  },
    {
      validator: checkSymbol, trigger: 'blur'
    }],
  name: [{
    required: true,
    message: '请输入属性名称',
    trigger: 'blur'
  },
    {
      validator: checkName, trigger: 'blur'
    }]
})

/**
 校验属性名称规则
 **/
function checkName(rule, value, callback) {
  let resultF = properList.find((f) => f.name === form.name)
  if (resultF) {
    callback(new Error('属性名称重复'));
  } else {
    callback()
  }
}

/**
 校验Symbol规则
 **/
function checkSymbol(rule, value, callback) {
  let resultF = properList.find((f) => f.symbol === form.symbol)
  if (resultF) {
    callback(new Error('属性标识符重复'));
  } else {
    callback()
  }
}

const form = reactive({
  symbol: "",
  name: "",
  rule: "",
  defaultValue: undefined
})
const {proxy} = getCurrentInstance();
const submitForm = () => {
  console.log(typeof form.rule)
  let value=
  rule['defaultValue'] = [
JSON.parse(form.rule)
  ];
  console.log(rule)
  proxy.$refs["productRef"].validate(valid => {
    if (valid) {

    }
  });
}
const state = reactive({
  visible: false,
  loading: false,
  id: '',
  model: {
    properties: [],
  }
})

const properList = reactive([
  {
    name: "校准频率",
    symbol: "accc",
    dataType: "float32",
    rule: "",
    default: "12.3"
  }
])

function getInfo(productId) {
  state.visible = true
  state.loading = true
  state.id = productId
  state.loading = false
}

defineExpose({
  getInfo,
})
</script>

<style lang="scss" scoped>
</style>
